<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout-grid</title>
    <style>
        #container{
            display:grid;
            grid-template-columns: repeat(5,260px);
            grid-template-rows:   repeat(5,130px);
            grid-auto-columns: 100px;
            grid-template-areas:
            "a b c d e"
            "f g g h j"
            "k g g i i"
            "l m n i i"
            "o p q r s";
            gap: 5px;
        }

        .item {
            color: #fff;
            font-size: 2em;
            text-align: center;
            border: 1px solid #e5e4e9;
}

.a {
  background-color: #ef342a;
}

.b {
  background-color: #f68f26;
}

.c {
  background-color: #4ba946;
}

.d {
  background-color: #0376c2;
}

.e {
  background-color: #c077af;
}
.f {
    background-color:#0376c2
}
.g {
    background-color: #c077af;
}
.h {
    background-color: #4ba946;
}
.i {
    background-color: #f68f26;
}
.j {
    background-color: #ef342a;
}
.k {
    background-color: #f68f26;
}
.l {
    background-color: #c077af;
}
.m {
    background-color: #4ba946;
}
.n {
    background-color: #ef342a;
}
.o {
    background-color: #4ba946;
}
.p {
    background-color: #f68f26;
}
.q {
    background-color:#0376c2
}
.r {
    background-color: #ef342a;
}


    </style>
</head>
<body>

    <div id="container">
        <div class="item a" style="grid-area: a">1</div>
        <div class="item b" style="grid-area: b">2</div>
        <div class="item c" style="grid-area: c">3</div>
        <div class="item d" style="grid-area: d">4</div>
        <div class="item e" style="grid-area: e">5</div>
        <div class="item f" style="grid-area: f">6</div>
        <div class="item g" style="grid-area: g">7</div>
        <div class="item h" style="grid-area: h">8</div>
        <div class="item i" style="grid-area: i">9</div>
        <div class="item j" style="grid-area: j">10</div>
        <div class="item k" style="grid-area: k">11</div>
        <div class="item l" style="grid-area: l">12</div>
        <div class="item m" style="grid-area: m">13</div>
        <div class="item n" style="grid-area: n">14</div>
        <div class="item o" style="grid-area: o">15</div>
        <div class="item p" style="grid-area: p">16</div>
        <div class="item q" style="grid-area: q">17</div>
        <div class="item r" style="grid-area: r">18</div>
        <div class="s" style="grid-area: s"></div>
    </div>
</body>
</html>